<template>
	<view class="content">
		<view v-if="isLoading" class="loadingico" :style="{height: windowHeight + 'px'}">
			<image style="width:50px;height: 50px;" src="../../static/images/loading.gif"></image>
		</view>
		<view v-else class="itembox" v-for="(bag,index) in bags" :key="index">
			<navigator class="item" :url="'./yuelininfo?bagid=' + bag.id">
				<image class="fengmian" :src="'https://www.yedushu.cn/' + bag.books.bimg_m"></image>
				<view class="text-box">
					<view class="text-area">
						<text class="bookname" selectable="true" user-select="true">{{bag.books.book_name}}</text>
						<text class="other" selectable="true" user-select="true">{{bag.books.zuozhe}} | {{bag.books.chubanshe}} </text>
						<view class="jinfo">
							<text v-if="bag.otype == 'S'" class="jiage">￥{{bag.nowprice}}</text>
							<text v-if="bag.otype == 'J'" class="jiage1">借阅</text>
							<text v-if="bag.otype == 'E'" class="jiage1">交换</text>
							<text v-if="bag.otype == 'Z'" class="jiage1">赠送</text>
							<text v-if="bag.condition == 0" class="zhejiu">较旧</text>
							<text v-if="bag.condition == 5" class="zhejiu">5成新</text>
							<text v-if="bag.condition == 6" class="zhejiu">6成新</text>
							<text v-if="bag.condition == 7" class="zhejiu">7成新</text>
							<text v-if="bag.condition == 8" class="zhejiu">8成新</text>
							<text v-if="bag.condition == 9" class="zhejiu">9成新</text>
							<text v-if="bag.condition == 10" class="zhejiu">全新</text>
						</view>
					</view>
					<!-- <view class="userinfo">
						<view>
							<image v-if="bag.users.avatar_file_min == null" class="face" src="https://www.yedushu.cn/usersface/default/avatar-min.png"></image>
							<image v-else class="face" :src="'https://www.yedushu.cn/' + bag.users.avatar_file_min"></image>
						</view>
						<text class="mingzi">{{bag.users.user_name}}</text>
					</view> -->
				</view>							
			</navigator>			
		</view>
		<view v-if="!isLoading">			
			<view v-if="total == 0" class="imgempty" :style="{height: windowHeight + 'px'}">
				<image class="img" src="../../static/images/ic_new_empty_view_book.png">
				<text class="txt">暂时没有转让的书籍</text>
			</view>
			<view v-else>
				<view v-if="footLoading" class="isload">加载更多...</view>
				<view v-else class="isend">~~ 我是有底线的 ~~</view>
			</view>			
		</view>		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bags: [], // 书包里的书籍信息
				uid: '',
				username: '',
				current_page: 1,
				isLoading: false,
				footLoading: false,
				windowHeight: '', // 窗体高度
				total: 0, // 数据总数，为了显示是否为空的提示
			}
		},
		onLoad(option) {
			this.isLoading = true;

			this.uid = option.uid;
			this.username = option.username;
			this.getusersbags();
			
			uni.setNavigationBarTitle({
			    title: this.username + ' 转让的书籍'
			});
			
			// 获得设备
			var _this = this;
			uni.getSystemInfo({
			    success: function (res) {
			        // console.log(res.model);
					_this.windowHeight = res.windowHeight;
			    }
			});
		},
		onPullDownRefresh() {
			// 下拉刷新
			// 清空数据
			// this.bags = [];
			// 获取第一页数据
			this.current_page = 1;
			// 开始获取数据
			this.getusersbags();
		},
		onReachBottom() {
			// 上拉加载更多
			// 获得当前页面
			this.current_page = this.current_page + 1;
			this.getusersbags();
		},
		methods: {
			getusersbags() {
				var url = 'https://www.yedushu.cn/api/usersbags?uid=' + this.uid + '&page=' + this.current_page;				
				uni.request({
				    url: url,
				    success: (res) => {
				        // console.log(JSON.stringify(res.data));
						this.total = res.data.total;
						if(res.data.last_page > this.current_page)
						{
							this.footLoading = true;
						}
						else {
							this.footLoading = false;
						}
						// 当前以后数据连接新获取的数据
						if(this.current_page == 1)
						{
							this.bags = res.data.data;
						} else {
							this.bags = this.bags.concat(res.data.data);
						}
						this.isLoading = false;
						// 停止下拉页面刷新动画
						uni.stopPullDownRefresh();
				    }
				});				
			},			
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
	}
	.loadingico {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.itembox {
		padding: 0 10px;
	}
	.item {
		display: flex;
		padding: 15px 0px;
		border-bottom: 1px solid #F2F2F2;
	}
	.fengmian {
		width: 80px;
		height: 108px;		
		padding-right: 8px;
	}
	.text-box {		
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.text-area {
		display: flex;
		flex-direction: column;
	}
	.bookname {
		font-size: 16px;
	}
	.other {
		font-size: 12px;
		color: #999;
		padding: 6px 0;
	}
	.jinfo {
		padding:0 0;
	}
	.jinfo .jiage {
		font-size: 16px;
		padding-right: 5px;
	}
	.jinfo .jiage1 {
		font-size: 15px;
		padding-right: 5px;
	}
	.jinfo .zhejiu {
		font-size: 10px;
		color: #ff0000;
		border: 1px solid #ff0000 ;
		padding: 0px 5px;
		border-radius: 5px;
	}
	.userinfo {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.userinfo .face {
		width: 15px;
		height: 15px;
		border-radius: 50%;
	}
	.userinfo .mingzi {
		font-size: 10px;		
		padding-left: 5px;
	}
	.isload {
		font-size: 14px;
		padding: 20px 0px;
		text-align: center;
	}
	.isend {
		font-size: 14px;
		padding: 10px 10px;
		text-align: center;		
	}
	.imgempty {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;		
	}
	.imgempty .img {
		width: 200px;
		height: 180px;
	}
	.imgempty .txt {
		font-size: 14px;
	}
</style>
